<template>
  <div>
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <hr style="border: 1px solid #F2F6FC;">
    <div style="background-color: #FFFFFF;height: 50px;padding-top: 20px;margin-bottom: 40px;">
      <el-row :gutter="20">
        <el-col :span="10" style="width: 50%;">
          <div>
            <el-statistic title="未审批请假数量">
              <template slot="formatter"> {{ leaveListNum }} </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="10">
          <div>
            <el-statistic title="未审批出差数量">
              <template slot="formatter"> {{ businessTripListNum }} </template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="margin-bottom: 30px;">
      <span style="margin-right: 100px;">迟到冠军:{{ '   '+mostLate }}</span><span>早退冠军:{{ '   '+mostEarly }}</span>
      <el-select v-model="month" placeholder="本月" style="float: right;" @change="handleChange">
        <el-option v-for="item in options" :key="item" :label="item + '月'" :value="item"></el-option>
      </el-select>
    </div>
    <hr style="border: 1px solid #F2F6FC;">
    <div>
      <div id="leEcharts"></div>
      <div id="lbEcharts"></div>
      <div id="totalCircle"></div>
      <div id="totalLine"></div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { hasEvent, leaveReport, getDepartList, getTotalAttendance, getMostLate, getMostEarly, businessTripReport } from '@/api/api'
export default {
  data () {
    return {
      userId: this.$store.state.userId,
      leaveListNum: '',
      businessTripListNum: '',
      departList: [],
      lateList: [],
      earlyList: [],
      leaveList: [],
      businessTripList: [],
      currentMonth: '',
      month: '',
      options: [],
      mostLate: '',
      mostEarly: '',
      totalLE: 0,
      totalLeave: 0,
      totalBt: 0
    }
  },
  methods: {
    nowtime () {
      const nowDate = new Date()
      const date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate()
      }
      // 拼接
      this.currentMonth = date.month
      this.month = date.month
      for (let i = 0; i < this.currentMonth; i++) {
        this.options.push(i + 1)
      }
    },
    handledraw () {
      this.departList = []
      this.lateList = []
      this.earlyList = []
      this.leaveList = []
      this.businessTripList = []
      getDepartList().then(res => {
        const dataList = res.data.data
        dataList.forEach(element => {
          this.departList.push(element.departName)
        })
      })
      getTotalAttendance(this.month).then(res => {
        if (res.data.code === 200) {
          res.data.data.forEach(element => {
            this.lateList.push(element.lateNums)
            this.earlyList.push(element.earlyNums)
            this.totalLE = element.lateNums + element.earlyNums + this.totalLE
          })
        }
        console.log(res.data)
      })
      const params = {
        month: this.month
      }
      leaveReport(params).then(res => {
        if (res.data.code === 200) {
          const dataList = res.data.data
          dataList.forEach(element => {
            this.leaveList.push(element.departLeaveNum)
            this.totalLeave = this.totalLeave + element.departLeaveNum
          })
          console.log(this.leaveList)
        }
      })
      businessTripReport(params).then(res => {
        if (res.data.code === 200) {
          const dataList = res.data.data
          dataList.forEach(element => {
            this.businessTripList.push(element.departLeaveNum)
            this.totalBt = this.totalBt + element.departLeaveNum
          })
        }
      })
      setTimeout(() => {
        this.drawLateAndEarly()
        this.drawLeaveAndBt()
        this.drawTotalCircle()
        this.drawTotalLine()
      }, 800)
    },
    drawLateAndEarly () {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      const myChart = echarts.init(document.getElementById('leEcharts'))
      // 指定图表的配置项和数据
      // 使用刚指定的配置项和数据显示图表。
      const leOption = {
        title: {
          text: '部门迟到早退人员统计'
        },
        tooltip: {},
        legend: {
          data: ['迟到早退人员数量']
        },
        xAxis: {
          data: this.departList
        },
        yAxis: {},
        series: [
          {
            name: '迟到人数',
            type: 'bar',
            data: this.lateList
          },
          {
            name: '早退人数',
            type: 'bar',
            data: this.earlyList
          }
        ]
      }
      myChart.setOption(leOption)
      // myChart.resize()
    },
    drawLeaveAndBt () {
      console.log(111)
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      const myChart = echarts.init(document.getElementById('lbEcharts'))
      // 指定图表的配置项和数据
      // 使用刚指定的配置项和数据显示图表。
      const lbOption = {
        title: {
          text: '部门请假出差人员统计'
        },
        tooltip: {},
        legend: {
          data: ['请假出差人员数量']
        },
        xAxis: {
          data: this.departList
        },
        yAxis: {},
        series: [
          {
            name: '请假人数',
            type: 'bar',
            data: this.leaveList
          },
          {
            name: '出差人数',
            type: 'bar',
            data: this.businessTripList
          }
        ]
      }
      myChart.setOption(lbOption)
      // myChart.resize()
    },
    drawTotalCircle () {
      const myChart = echarts.init(document.getElementById('totalCircle'))
      const option = {
        series: [
          {
            type: 'pie',
            data: [
              {
                value: this.totalLE,
                name: '总迟到早退'
              },
              {
                value: this.totalLeave,
                name: '总请假'
              },
              {
                value: this.totalBt,
                name: '总出差'
              }
            ]
          }
        ]
      }

      myChart.setOption(option)
    },
    drawTotalLine () {
      const myChart = echarts.init(document.getElementById('totalLine'))
      const option = {
        xAxis: {
          type: 'category',
          data: ['总迟到早退', '总请假', '总出差']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [this.totalLE, this.totalLeave, this.totalBt],
            type: 'line'
          }
        ]
      }

      myChart.setOption(option)
    },
    handleChange () {
      this.handledraw()
    }
  },
  mounted () {
    this.nowtime()
    hasEvent(this.userId).then(res => {
      console.log(res.data)
      this.leaveListNum = res.data.data.leaveListNum
      this.businessTripListNum = res.data.data.businessTripListNum
      if (res.data.data.msg !== 0) {
        this.$notify({
          title: '提示',
          message: '您有' + res.data.data.msg + '条消息未读',
          duration: 0
        })
      }
    })
    getMostLate(this.month).then(res => {
      // console.log(res.data)
      this.mostLate = res.data.data.userId
    })
    getMostEarly(this.month).then(res => {
      // console.log(res.data)
      this.mostEarly = res.data.data.userId
    })
    this.handledraw()
  }
}
</script>

<style lang="scss" scoped>
#leEcharts,
#lbEcharts {
  box-sizing: border-box;
  float: left;
  width: 50%;
  height: 300px;
  padding: 10px;
}

#totalCircle,
#totalLine {
  box-sizing: border-box;
  float: left;
  width: 50%;
  height: 300px;
  padding: 10px;
}
</style>
